<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
//背景粒子库
  //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
const particlesInit = async engine => {
    await loadSlim(engine);
};
const particlesLoaded = async container => {
    console.log("Particles container loaded", container);
};

////
import { ElMessage } from 'element-plus'
import {dengLogin} from '../api/login'
import { useRouter } from "vue-router";
import { reactive, ref } from 'vue'
import {useCounterStore} from '../stores/counter'
const router = useRouter()
const counter=useCounterStore()
const ruleFormRef=ref()
const ruleForm =reactive({
    user:"",
    password:""
})
 const rules=({
     user: [
    { required: true, message: '用户名没有填写', trigger: 'blur' },
    { min: 1, max: 5, message: '长度在 3 to 5', trigger: 'blur' }
     ],
     password: [
    { required: true, message: '密码没有填写', trigger: 'blur' },
    { min: 1, max: 8, message: '长度在 3 to 5', trigger: 'blur' }
     ],
 })
  //登录按钮
  const submitForm = () =>{
    ruleFormRef.value.validate(async(valia)=>{
       if(valia){
        console.log("通过");
        const res= await dengLogin(ruleForm)
        console.log(res.data);
        if(res.data.state==200){
            router.push('/index')
        }
        // localStorage.setItem("amdinUser",JSON.stringify(res.data.result))
        counter.AmdinUser(res.data.result)
          ElMessage({
          message:res.data.massage,
          type: 'success',
       })
       }else{
        console.log("信息没填");
       }
    })
    

  }
</script>
<template>
    <div>
         <vue-particles
            id="tsparticles"
            :particlesInit="particlesInit"
            :particlesLoaded="particlesLoaded"
            :options="{
                    background: {
                        color: {
                            value: '#999999'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: 'push'
                            },
                            onHover: {
                                enable: true,
                                mode: 'repulse'
                            },
                            resize: true
                        },
                        modes: {
                            bubble: {
                                distance: 400,
                                duration: 2,
                                opacity: 0.8,
                                size: 40
                            },
                            push: {
                                quantity: 4
                            },
                            repulse: {
                                distance: 200,
                                duration: 0.4
                            }
                        }
                    },
                    particles: {
                        color: {
                            value: '#ffffff'
                        },
                        links: {
                            color: '#ffffff',
                            distance: 150,
                            enable: true,
                            opacity: 0.5,
                            width: 1
                        },
                        collisions: {
                            enable: true
                        },
                        move: {
                            direction: 'none',
                            enable: true,
                            outModes: {
                                default: 'bounce'
                            },
                            random: false,
                            speed: 3,
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 800
                            },
                            value: 80
                        },
                        opacity: {
                            value: 0.5
                        },
                        shape: {
                            type: 'circle'
                        },
                        size: {
                            value: { min: 1, max: 5 },
                        }
                    },
                    detectRetina: true
                }"
        />
        <div class="page">
              <div class="login">
                <h1>星空科技企业管理网站</h1>
                <div class="form">
            <el-form
             ref="ruleFormRef"
             style="max-width: 600px"
            :model="ruleForm"
              status-icon
             :rules="rules"
             label-width="auto"
             class="demo-ruleForm"
           >
            <el-form-item label="用户名" prop="user">
               <el-input v-model="ruleForm.user" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" />
            </el-form-item>
                   <el-button type="primary" size="large" @click="submitForm()">
                  登录
                  </el-button>
          </el-form>         
                </div>
              </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    #tsparticles{
       position: relative;
       width: 100%;
       height: 100vh; /* 必须设置高度 */
       background: #0d47a1;
    }
    .page{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      .login{
        box-sizing: border-box;
        height: 40%;
        width: 30%;
        background: #363636;
        // box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        border-radius: 10px;
        padding: 40px;
        text-align: center;
        h1{
        color: #ffffff;
        }
        // .form{

        // }
      }
    }
</style>